<div class="love-banner">
   <div class="tenways-love {% unless section.settings.full_width %}page-width{% endunless %}">
     
     <div class="title-wrapper--self-padded-mobile{% if section.settings.title == blank %} title-wrapper-with-link--no-heading{% endif %}">
        <h2 class="title">
          {{ section.settings.title | escape }}
        </h2>
        </div>
     
    {%- if section.settings.image != blank -%}   
      <div class="top-live">
        <a{% if section.settings.button_link != blank %} href="{{ section.settings.button_link }}"{% endif %} {% if section.settings.button_link == blank %} aria-disabled="true"{% endif %}>
            <div class="pc-banner">
             {%- if section.settings.image != blank -%}   
                <img
                srcset="{%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                  {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
                  {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
                  {%- if section.settings.image.width >= 1100 -%}{{ section.settings.image | img_url: '1100x' }} 1100w,{%- endif -%}
                  {%- if section.settings.image.width >= 1200 -%}{{ section.settings.image | img_url: '1200x' }} 1500w,{%- endif -%}
                  {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                  {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                  {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                  {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}
                  {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
                sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                src="{{ section.settings.image | img_url: '1500x' }}"
                loading="lazy"
                alt="{{ section.settings.image.alt | escape }}"
                width="{{ section.settings.image.width }}"
                height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}"
              >
              {%- endif -%} 
             </div>
             <div class="image_mobile">
                {%- if section.settings.image_mobile != blank -%}  
                <img
                    srcset="{%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
                      {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
                      {%- if section.settings.image_mobile.width >= 1100 -%}{{ section.settings.image_mobile | img_url: '1100x' }} 1100w,{%- endif -%}
                      {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
                      {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
                      {%- if section.settings.image_mobile.width >= 2000 -%}{{ section.settings.image_mobile | img_url: '2000x' }} 2000w,{%- endif -%}
                      {%- if section.settings.image_mobile.width >= 3000 -%}{{ section.settings.image_mobile | img_url: '3000x' }} 3000w,{%- endif -%}
                      {%- if section.settings.image_mobile.width >= 3840 -%}{{ section.settings.image_mobile | img_url: '3840x' }} 3840w,{%- endif -%}
                      {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
                    sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
                    src="{{ section.settings.image_mobile | img_url: '1500x' }}"
                    loading="lazy"
                    alt="{{ section.settings.image_mobile.alt | escape }}"
                    width="{{ section.settings.image_mobile.width }}"
                    height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
                    {% if section.settings.image_2 != blank %}class="banner__media-image-half"{% endif %}
                  >
             {%- endif -%} 
             </div>
        </a>
      </div>
      {%- endif -%} 

     <div class="tenways-love-featrue">
      {%- for block in section.blocks -%}
      <div class="feature-tenways" {{ block.shopify_attributes }}>
       <div class="feature">
         <div>
           {%- if block.settings.html_1 != blank -%}
           {{ block.settings.html_1 }}
           {%- endif -%}
         </div>
         <div>
           {%- if block.settings.html_2 != blank -%}
           {{ block.settings.html_2 }}
           {%- endif -%}
         </div>
         <div>
           {%- if block.settings.html_3 != blank -%}
           {{ block.settings.html_3 }}
           {%- endif -%}
         </div>
         <div>
           {%- if block.settings.html_4 != blank -%}
           {{ block.settings.html_4 }}
           {%- endif -%}
         </div>
       </div>
     </div>
     {%- endfor -%}

     <div class="love-feature m_feature product__media-title">
      <div class="media-title-list">
        <span>{% render 'icon-delay' %}</span>

       

        {%- if section.settings.html_1 != blank -%}
         {{ section.settings.html_1 }}
        {%- endif -%}
      </div>

       <div class="media-title-list">
         <span>{% render 'icon-change' %}</span>
        

         {%- if section.settings.html_2 != blank -%}
         {{ section.settings.html_2 }}
        {%- endif -%}

        </div>

      <div class="media-title-list">
        <span>{% render 'icon-range' %}</span>
       
         <div class="product_range">
          {%- if section.settings.html_3 != blank -%}
          {{ section.settings.html_3 }}
         {%- endif -%}

         
           <span class="tenways-tip">{% render 'tenways-tip' %}</span> 

           {%- if section.settings.html_4 != blank -%}
           {{ section.settings.html_4 }}
          {%- endif -%}

         
         </div>
     </div>
     </div>
     </div>

   </div>
</div>

{% schema %}
{
  "name": "Love banner",
  "tag": "section",
  "class": "spaced-section spaced-section--full-width",
  "settings": [
 {
      "type": "text",
      "id": "title",
      "default":"title",
      "label": "Title"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.image-banner.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_mobile",
      "label": "Mobile image"
    },
    {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
    {
        "type": "checkbox",
        "id": "full_width",
        "default": false,
        "label": "t:sections.rich-text.settings.full_width.label"
      },
      {
        "type": "html",
        "id": "html_1",
        "label": "html_1"
      },
      {
        "type": "html",
        "id": "html_2",
        "label": "html_2"
      },
      {
        "type": "html",
        "id": "html_3",
        "label": "html_3"
      },
      {
        "type": "html",
        "id": "html_4",
        "label": "html_4"
      }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "feature",
      "limit": 1,
      "settings": [
      {
        "type": "html",
        "id": "html_1",
        "label": "html_1"
      },
      {
        "type": "html",
        "id": "html_2",
        "label": "html_2"
      },
      {
        "type": "html",
        "id": "html_3",
        "label": "html_3"
      },
      {
        "type": "html",
        "id": "html_4",
        "label": "html_4"
      }
      ]
    }
  ],
  "presets": [
    {
      "name": "Love banner"
    }
  ]
}
{% endschema %}
